<template>
  <div class="list-wrapper">
    <label class="title">热销推荐</label>
    <ul class="list">
      <router-link tag="li" :to="'/detail/' + item.id" class="list__item border-bottom" v-for="item of recommendList" :key="item.id">
        <div class="img-wrap">
          <img :src="item.imgUrl" />
        </div>
        <div class="content-wrap">
          <h4>{{item.title}}</h4>
          <p>{{item.desc}}</p>
          <div class="more">查看详情</div>
        </div>
      </router-link>
    </ul>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: 'recommendList',
  props: {
    recommendList: Array
  }
}
</script>

<style lang="scss" scoped>
  @import "~styles/scss/variable.scss";
  @import "~styles/scss/mixins.scss";
  .list-wrapper{
    .title {
      height: .8rem;
      line-height: .8rem;
      padding: 0 .2rem;
      color: $color-text-regular;
    }
    .list {
      background: #fff;
      &__item {
        display: flex;
        padding: .1rem .2rem;
        .img-wrap {
          margin-right: .2rem;
          img {
            width: 1.6rem;
          }
        }
        .content-wrap {
          flex: 1;
          min-width: 0;
          h4 {
            min-width: 0;
            font-weight: bold;
            color: $color-text-dark;
            font-size: $fontSize-large;
            margin-bottom: .16rem;
            margin-top: .08rem;
            @include ellipsis();
          }
          p {
            min-width: 0;
            font-size: $fontSize-small;
            color: $color-text-light-grey;
            margin-bottom: .3rem;
            @include ellipsis();
          }
          .more {
            display: inline-block;
            background: #EE9E39;
            font-size: $fontSize-small;
            color: #fff;
            padding: .06rem .1rem;
            border-radius: .04rem;
          }
        }
      }
    }
  }
</style>
